// 面包屑导航部分
crumbFn()
function crumbFn() {
    var crumbbox = document.querySelector('.crumbbox');
    var path = goodData.path;
    // console.log(path);
    path.forEach(function (obj) {
        // console.log(obj);
        if (obj.url) {
            var a = document.createElement('a');
            a.innerHTML = obj.title;
            a.href = obj.url;
            var span = document.createElement('span');
            span.innerHTML = ' / ';
            crumbbox.appendChild(a);
            crumbbox.appendChild(span);
        } else {
            var span = document.createElement('span');
            span.innerHTML = obj.title;
            crumbbox.appendChild(span);
        }
    });
}

// 放大镜效果实现
showPicFn()
function showPicFn(){
    var sImgBox = document.querySelector('.sImgBox');
    var bigImgBox = document.querySelector('.bigImgBox');
    var mask = document.querySelector('.mask');
    sImgBox.onmouseover = function(){
        mask.style.display = 'block';
        bigImgBox.style.display = 'block';

        // 获取元素相对于 视口的距离 - 窗口
        // var l = mask.getBoundingClientRect().left
        // var t = mask.getBoundingClientRect().top
        // console.log(l,t);

        sImgBox.onmousemove = function(e){
            // 获取鼠标位置 - 相对与视口
            var x = e.clientX;
            var y = e.clientY;
            // let sImgBoxL = sImgBox.offsetLeft;
            var sImgBoxL = sImgBox.getBoundingClientRect().left;
            var sImgBoxT = sImgBox.getBoundingClientRect().top;

            var l = x - sImgBoxL - mask.offsetWidth/2;
            var t = y - sImgBoxT - mask.offsetHeight/2;

            var maxL = sImgBox.offsetWidth - mask.offsetWidth;
            var maxT = sImgBox.offsetHeight - mask.offsetHeight;

            l = l<0?0:l;
            t = t<0?0:t;
            l = l>maxL?maxL:l;
            t = t>maxT?maxT:t;

            // if(l<0){
            //     l=0;
            // }
            // if(t<0){
            //     t=0;
            // }
            // if(l>maxL){
            //     l = maxL;
            // }
            // if(t>maxT){
            //     t = maxT;
            // }
            mask.style.left = l + 'px';
            mask.style.top = t + 'px';


            // ？ 大图宽高 / 大图显示区宽高  = 小图的显示区 / 小图的蒙版
            var scale = (sImgBox.offsetWidth - mask.offsetWidth) / (800 - bigImgBox.offsetWidth);

            var imgL = -l / scale;
            var imgT = -t / scale;
            
            // 大图修改显示位置
            bigImgBox.style.backgroundPosition = imgL  + 'px '+ imgT +'px';
        }

        sImgBox.onmouseout = function(){
            mask.style.display = 'none';
            bigImgBox.style.display = 'none';
            sImgBox.onmousemove = null;
            sImgBox.onmouseout = null;
        }
    }
}

// 放大镜图片列表实现
picListFn()
function picListFn(){
    var imgArr = goodData.imagessrc;
    var imgListBox = document.querySelector('.sImgList');
    var btns = imgListBox.querySelectorAll('a');
    var sImgMidUl = document.querySelector('.sImgMid ul');
    var str = '';
    imgArr.forEach(function(item){
        str+='<li><img src="'+item.s+'" alt=""></li>';
    })
    sImgMidUl.innerHTML = str;
    var lis = imgListBox.querySelectorAll('li');
    var liW = lis[0].offsetWidth+20;
    var index = 0;
    var maxL = -liW*(lis.length - 5);
    var maxIndex= Math.floor((lis.length - 5)/2);
    btns[1].onclick = function(){
        index++;
        if(index * 2 > lis.length - 5 ){
            sImgMidUl.style.marginLeft = maxL +'px';
            index--;
        }else{
            sImgMidUl.style.marginLeft = - liW * 2 * index +'px';
        }
        // console.log(index);
    }
    btns[0].onclick = function(){
        index--;
        if(index < 0){
            index = 0;
            sImgMidUl.style.marginLeft = 0;
            return;
        }
        if(index==maxIndex-1){
            var moveL =  liW * 2;
            sImgMidUl.style.marginLeft = maxL + moveL +'px';
        }else{
            sImgMidUl.style.marginLeft = maxL + liW*2*(maxIndex-index) +'px';
        }
        // console.log(index);
    }
}


// 右侧商品详情数据渲染
goodRenderFn()
function goodRenderFn(){
    var data = goodData.goodsDetail;
    var mainBox_rBox = document.querySelector('.mainBox_r');
    var str = `
    <h3 class="title">${data.title}</h3>
    <p class="recommend">${data.recommend}</p>
    <div class="priceBox">
        <div>
            <h6>价&nbsp;&nbsp;&nbsp;&nbsp;格</h6>
            <p>
                ￥
                <em>${data.price}</em>
                <a href="#">降价通知</a>
            </p>
        </div>
        <i>累计评价 ${data.evaluateNum}</i>
        <div>
            <h6>促&nbsp;&nbsp;&nbsp;&nbsp;销</h6>
            <p>
                <span>${data.promoteSales.type}</span>
                ${data.promoteSales.content}
            </p>
        </div>
    </div>
    <div class="supportBox">
        <p>
            <em>支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</em><i>${data.support}</i>
        </p>
        <p>
            <em>配&nbsp;送&nbsp;至</em><i>${data.address}</i>
        </p>
    </div>
    <div class="chooseBox"></div>
    <div class="main_box_rumb_box"></div>
    <div class="changeCountBox">
        <div class="countBox">
            <input type="text" name="" id="">
            <a href="#">+</a>
            <a href="#">-</a>
        </div>
        <button>加入购物车</button>
    </div>
    `;
    mainBox_rBox.innerHTML = str;
    var crumbBox = document.querySelector('.main_box_rumb_box');
    var crumbArr = data.crumbData;
    // console.log(crumbArr);
    crumbArr.forEach(function(item,index){
        // 创建dl和dt
        var dl = document.createElement('dl');
        var dt = document.createElement('dt');
        dt.innerHTML = item.title;
        dl.setAttribute('index',index);
        dl.appendChild(dt);
        var ddArr = item.data;
        ddArr.forEach(function(item2){
            var dd = document.createElement('dd');
            dd.innerText = item2.type;
            dd.setAttribute('changeprice',item2.changePrice)
            dl.appendChild(dd);
        })
        crumbBox.appendChild(dl);
    })
    // console.log(data);
}


var crumbArr = [];
crumbArr.length = 4;
crumbArr.fill(0);
// ddclickfn dd点击事件
ddClickFn()
function ddClickFn(){
    // 获取所有dd
    var aDD = document.querySelectorAll('.mainBox_r dd');
    var oChooseBox = document.querySelector('.mainBox_r .chooseBox');
    for(var i =0;i<aDD.length;i++){
        aDD[i].onclick = function(){
            var oPar = this.parentNode;
            // 遍历当前点击dd的父级下的dd
            var oParDDs = oPar.querySelectorAll('dd');
            oParDDs.forEach(function(oDd){
                oDd.style.color = '#666';
            })
            this.style.color = 'red';
            var oParIndex = oPar.getAttribute('index');
            // crumbArr[oParIndex] = this.innerHTML;
            crumbArr[oParIndex] = {
                name:this.innerHTML,
                changePrice:this.getAttribute('changePrice')
            };
            console.log(crumbArr);
            oChooseBox.innerHTML = '';
            crumbArr.forEach(function(obj,index){
                if(obj){ //有值
                    var oSpan = document.createElement('span');
                    var i = document.createElement('i');
                    oSpan.innerHTML = obj.name;
                    i.innerHTML = 'X';
                    i.setAttribute('index',index)
                    i.onclick = function(){
                        var oPar = this.parentNode;
                        oChooseBox.removeChild(oPar);
                        var iIndex = this.getAttribute('index');
                        crumbArr[iIndex] = 0;
                        var aDl = document.querySelectorAll('.main_box_rumb_box dl');
                        var oDl = aDl[iIndex];
                        var aDD = oDl.querySelectorAll('dd');
                        for(var i=0;i<aDD.length;i++){
                            aDD[i].style.color = '#666';
                        }
                        aDD[0].style.color = 'red';
                        changePriceFn();
                    }
                    oSpan.appendChild(i);
                    oChooseBox.appendChild(oSpan);
                }
            })
            changePriceFn();
        }
    }
}

cheboxClickFn()
function cheboxClickFn(){
    var checkBoxS = document.querySelectorAll('.main_bot_r_t_box input');
    checkBoxS.forEach(function(btns){
        btns.onchange = function(){
            changePriceFn();
        }
    })
}
function changePriceFn(){
     // 获取原始价格
     var price = goodData.goodsDetail.price;
     var priceBoxEm = document.querySelector('.priceBox em');
     var oP = document.querySelector('.main_bot_r_t_box > div:first-child i');
     var oP2 = document.querySelector('.main_bot_r_t_box > div:last-child i');
     crumbArr.forEach(function(obj){
         if(obj){
             price+=Number(obj.changePrice);
         }
     })
     priceBoxEm.innerHTML = oP.innerHTML = price;
     // 选择搭配
     var aInp = document.querySelectorAll('.main_bot_r_t_box input');
     aInp.forEach(function(eleInp){
        // console.log(eleInp.checked);
        if(eleInp.checked){
            price+=Number(eleInp.value);
        }
     })
     oP2.innerHTML =  price
}

// 选项卡实现
tabFn('.tabBtnBox a','.tabListBox > div')
tabFn('.main_bot_r_b .btnBox li','.boxList li')
function tabFn(btn,box){
    var btns = document.querySelectorAll(btn);
    var tabBox = document.querySelectorAll(box);
    btns.forEach(function(ele,i){
        ele.onclick = function(){
            for (var index = 0; index < btns.length; index++) {
               btns[index].className = '';
               tabBox[index].className = '';
            }
            this.className = 'active';
            tabBox[i].className = 'show';
        }
    })
}

